<template>
  <div>
    <div>ref操作DOM</div>
    <hr>
    <ul>
      <!-- 绑定函数时需要动态绑定 -->
      <li v-for='(item, index) in list' :ref='setDom' :key='index'>{{item}}</li>
    </ul>
    <div>{{msg}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { onBeforeUpdate, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    const list = ref(['apple', 'orange', 'peach'])
    const msg = ref('hello')

    // 绑定ref的DOM
    let arr = []
    const setDom = (el) => {
      if (el) {
        arr.push(el)
      }
    }

    onBeforeUpdate(() => {
      // 组件更新前触发
      arr = []
    })

    const handleClick = () => {
      // console.log(arr[1].innerHTML)
      // 修改模板中任何数据都会导致ref绑定的函数重新触发
      msg.value = 'nihao'
      console.log(arr.length)
    }

    return { list, msg, setDom, handleClick }
  }
}
</script>
